<template>
  <div class="points-history">
    <van-nav-bar 
      title="积分变化历史" 
      left-text="返回" 
      left-arrow 
      @click-left="onClickLeft"
      class="custom-nav" 
    />
    
    <div class="scroll-container">
      <div class="observer-target"></div>
      <van-steps direction="vertical" :active="0" v-loading="loading">
        <van-step v-for="item of changes" :key="item.id" class="history-item">
          <div class="points-card">
            <h3 class="user-points">
              <span class="username">{{ item.nickName }}</span>
              <span class="points" :class="item.points > 0 ? 'positive' : 'negative'">
                {{ item.points }}
              </span>
            </h3>
            <p class="description">内容：{{ item.changeInfo }}</p>
            <p class="time">{{ item.createTime }}</p>
          </div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script setup>
import { userHistoryChangesJs } from "@/api/user";
import { ref} from "vue";


const onClickLeft = () => history.back();

const changes = ref([]);
const form = ref({
  pageNum: 1,
  pageSize: 5,
});


function userHistoryChanges() {
  userHistoryChangesJs(form.value).then(res => {
    console.log(res.data);
    if (res.data.code == 200000) {
      console.log(res.data.data);
      changes.value = res.data.data.records;
    }
  });
}

userHistoryChanges();

</script>

<style scoped>
.points-history {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.custom-nav {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.scroll-container {
  height: calc(100vh - 46px);
  overflow-y: auto;
  padding: 16px;
}

.observer-target {
  height: 10px;
  visibility: hidden;
}

.history-item {
  margin-bottom: 16px;
}

.points-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.2s;
}

.points-card:hover {
  transform: translateY(-2px);
}

.user-points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px 0;
  font-size: 16px;
}

.username {
  color: #333;
  font-weight: 600;
}

.points {
  font-weight: 600;
  font-size: 18px;
}

.positive {
  color: #07c160;
}

.negative {
  color: #ee0a24;
}

.description {
  color: #666;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.time {
  color: #999;
  font-size: 12px;
  margin: 8px 0 0 0;
}

/* Override van-steps default styles */
:deep(.van-steps--vertical) {
  padding: 0;
}

:deep(.van-step) {
  background: transparent;
  padding: 0;
}

:deep(.van-step__circle-container) {
  display: none;
}

:deep(.van-step__line) {
  display: none;
}
</style>